<template>
    <div class="blog-left">
        <article v-for="(a,index) in records" :key="index">
            <h4><a href="/pBlogDetails?aid=100">{{a.title}}</a></h4>
            <div class="article-title">
                <div class="article-text">{{a.summary}}</div>
                <div class="article-timer"><span>{{a.catalogName}}&nbsp;</span><i
                        class="el-icon-date"></i><span>{{a.createTime}}</span> <span
                ><i class="el-icon-view"></i> {{a.browseNumber}} </span>
                </div>
            </div>
        </article>

        <div class="article-pager">
            <!--引入elementui的分页组件，前端实现的分页-->
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </div>
        <br>
    </div>
</template>

<script>
    export default {
        name: "MyBlogListLefter",
        data() {
            return {
                "records": [
                    {
                        "version": 0,
                        "createTime": "2021-07-21 16:16:58",
                        "modifyTime": null,
                        "flag": true,
                        "aid": 515,
                        "uid": 10,
                        "username": "西蒙牛",
                        "title": "Vue-cli基础教程(十六)",
                        "summary": "vue-router基本概念vue-router基本概念vue-router基本概念",
                        "mdcontent": "**1.什么是vue-router**\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：\n\n- 嵌套的路由/视图表\n- 模块化的、基于组件的路由配置\n- 路由参数、查询、通配符\n- 基于 Vue.js 过渡系统的视图过渡效果\n- 细粒度的导航控制\n- 带有自动激活的 CSS class 的链接\n- HTML5 历史模式或 hash 模式，在 IE9 中自动降级\n- 自定义的滚动条行为\n\n注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。\n\n\n**2.什么是SPA？**\n\n那么什么是单页面应用（SPA:Single Page Application）呢？\n\n所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。\n\n总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。\n\n",
                        "content": "<p><strong>1.什么是vue-router</strong><br />\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>\n<ul>\n<li>嵌套的路由/视图表</li>\n<li>模块化的、基于组件的路由配置</li>\n<li>路由参数、查询、通配符</li>\n<li>基于 Vue.js 过渡系统的视图过渡效果</li>\n<li>细粒度的导航控制</li>\n<li>带有自动激活的 CSS class 的链接</li>\n<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>\n<li>自定义的滚动条行为</li>\n</ul>\n<p>注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。</p>\n<p><strong>2.什么是SPA？</strong></p>\n<p>那么什么是单页面应用（SPA:Single Page Application）呢？</p>\n<p>所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。</p>\n<p>总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。</p>\n",
                        "replyNumber": 0,
                        "browseNumber": 0,
                        "tags": "",
                        "type": "教程",
                        "catalog": "h5",
                        "catalogName": "前端"
                    },
                    {
                        "version": 0,
                        "createTime": "2021-07-21 16:16:58",
                        "modifyTime": null,
                        "flag": true,
                        "aid": 515,
                        "uid": 10,
                        "username": "西蒙牛",
                        "title": "Vue-cli基础教程(十六)",
                        "summary": "vue-router基本概念",
                        "mdcontent": "**1.什么是vue-router**\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：\n\n- 嵌套的路由/视图表\n- 模块化的、基于组件的路由配置\n- 路由参数、查询、通配符\n- 基于 Vue.js 过渡系统的视图过渡效果\n- 细粒度的导航控制\n- 带有自动激活的 CSS class 的链接\n- HTML5 历史模式或 hash 模式，在 IE9 中自动降级\n- 自定义的滚动条行为\n\n注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。\n\n\n**2.什么是SPA？**\n\n那么什么是单页面应用（SPA:Single Page Application）呢？\n\n所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。\n\n总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。\n\n",
                        "content": "<p><strong>1.什么是vue-router</strong><br />\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>\n<ul>\n<li>嵌套的路由/视图表</li>\n<li>模块化的、基于组件的路由配置</li>\n<li>路由参数、查询、通配符</li>\n<li>基于 Vue.js 过渡系统的视图过渡效果</li>\n<li>细粒度的导航控制</li>\n<li>带有自动激活的 CSS class 的链接</li>\n<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>\n<li>自定义的滚动条行为</li>\n</ul>\n<p>注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。</p>\n<p><strong>2.什么是SPA？</strong></p>\n<p>那么什么是单页面应用（SPA:Single Page Application）呢？</p>\n<p>所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。</p>\n<p>总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。</p>\n",
                        "replyNumber": 0,
                        "browseNumber": 0,
                        "tags": "",
                        "type": "教程",
                        "catalog": "h5",
                        "catalogName": "前端"
                    },
                    {
                        "version": 0,
                        "createTime": "2021-07-21 16:16:58",
                        "modifyTime": null,
                        "flag": true,
                        "aid": 515,
                        "uid": 10,
                        "username": "西蒙牛",
                        "title": "Vue-cli基础教程(十六)",
                        "summary": "vue-router基本概念",
                        "mdcontent": "**1.什么是vue-router**\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：\n\n- 嵌套的路由/视图表\n- 模块化的、基于组件的路由配置\n- 路由参数、查询、通配符\n- 基于 Vue.js 过渡系统的视图过渡效果\n- 细粒度的导航控制\n- 带有自动激活的 CSS class 的链接\n- HTML5 历史模式或 hash 模式，在 IE9 中自动降级\n- 自定义的滚动条行为\n\n注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。\n\n\n**2.什么是SPA？**\n\n那么什么是单页面应用（SPA:Single Page Application）呢？\n\n所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。\n\n总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。\n\n",
                        "content": "<p><strong>1.什么是vue-router</strong><br />\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>\n<ul>\n<li>嵌套的路由/视图表</li>\n<li>模块化的、基于组件的路由配置</li>\n<li>路由参数、查询、通配符</li>\n<li>基于 Vue.js 过渡系统的视图过渡效果</li>\n<li>细粒度的导航控制</li>\n<li>带有自动激活的 CSS class 的链接</li>\n<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>\n<li>自定义的滚动条行为</li>\n</ul>\n<p>注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。</p>\n<p><strong>2.什么是SPA？</strong></p>\n<p>那么什么是单页面应用（SPA:Single Page Application）呢？</p>\n<p>所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。</p>\n<p>总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。</p>\n",
                        "replyNumber": 0,
                        "browseNumber": 0,
                        "tags": "",
                        "type": "教程",
                        "catalog": "h5",
                        "catalogName": "前端"
                    },
                    {
                        "version": 0,
                        "createTime": "2021-07-21 16:16:58",
                        "modifyTime": null,
                        "flag": true,
                        "aid": 515,
                        "uid": 10,
                        "username": "西蒙牛",
                        "title": "Vue-cli基础教程(十六)",
                        "summary": "vue-router基本概念",
                        "mdcontent": "**1.什么是vue-router**\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：\n\n- 嵌套的路由/视图表\n- 模块化的、基于组件的路由配置\n- 路由参数、查询、通配符\n- 基于 Vue.js 过渡系统的视图过渡效果\n- 细粒度的导航控制\n- 带有自动激活的 CSS class 的链接\n- HTML5 历史模式或 hash 模式，在 IE9 中自动降级\n- 自定义的滚动条行为\n\n注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。\n\n\n**2.什么是SPA？**\n\n那么什么是单页面应用（SPA:Single Page Application）呢？\n\n所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。\n\n总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。\n\n",
                        "content": "<p><strong>1.什么是vue-router</strong><br />\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>\n<ul>\n<li>嵌套的路由/视图表</li>\n<li>模块化的、基于组件的路由配置</li>\n<li>路由参数、查询、通配符</li>\n<li>基于 Vue.js 过渡系统的视图过渡效果</li>\n<li>细粒度的导航控制</li>\n<li>带有自动激活的 CSS class 的链接</li>\n<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>\n<li>自定义的滚动条行为</li>\n</ul>\n<p>注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。</p>\n<p><strong>2.什么是SPA？</strong></p>\n<p>那么什么是单页面应用（SPA:Single Page Application）呢？</p>\n<p>所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。</p>\n<p>总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。</p>\n",
                        "replyNumber": 0,
                        "browseNumber": 0,
                        "tags": "",
                        "type": "教程",
                        "catalog": "h5",
                        "catalogName": "前端"
                    },
                    {
                        "version": 0,
                        "createTime": "2021-07-21 16:16:58",
                        "modifyTime": null,
                        "flag": true,
                        "aid": 515,
                        "uid": 10,
                        "username": "西蒙牛",
                        "title": "Vue-cli基础教程(十六)",
                        "summary": "vue-router基本概念",
                        "mdcontent": "**1.什么是vue-router**\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：\n\n- 嵌套的路由/视图表\n- 模块化的、基于组件的路由配置\n- 路由参数、查询、通配符\n- 基于 Vue.js 过渡系统的视图过渡效果\n- 细粒度的导航控制\n- 带有自动激活的 CSS class 的链接\n- HTML5 历史模式或 hash 模式，在 IE9 中自动降级\n- 自定义的滚动条行为\n\n注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。\n\n\n**2.什么是SPA？**\n\n那么什么是单页面应用（SPA:Single Page Application）呢？\n\n所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。\n\n总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。\n\n",
                        "content": "<p><strong>1.什么是vue-router</strong><br />\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>\n<ul>\n<li>嵌套的路由/视图表</li>\n<li>模块化的、基于组件的路由配置</li>\n<li>路由参数、查询、通配符</li>\n<li>基于 Vue.js 过渡系统的视图过渡效果</li>\n<li>细粒度的导航控制</li>\n<li>带有自动激活的 CSS class 的链接</li>\n<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>\n<li>自定义的滚动条行为</li>\n</ul>\n<p>注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。</p>\n<p><strong>2.什么是SPA？</strong></p>\n<p>那么什么是单页面应用（SPA:Single Page Application）呢？</p>\n<p>所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。</p>\n<p>总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。</p>\n",
                        "replyNumber": 0,
                        "browseNumber": 0,
                        "tags": "",
                        "type": "教程",
                        "catalog": "h5",
                        "catalogName": "前端"
                    },
                    {
                        "version": 0,
                        "createTime": "2021-07-21 16:16:58",
                        "modifyTime": null,
                        "flag": true,
                        "aid": 515,
                        "uid": 10,
                        "username": "西蒙牛",
                        "title": "Vue-cli基础教程(十六)",
                        "summary": "vue-router基本概念",
                        "mdcontent": "**1.什么是vue-router**\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：\n\n- 嵌套的路由/视图表\n- 模块化的、基于组件的路由配置\n- 路由参数、查询、通配符\n- 基于 Vue.js 过渡系统的视图过渡效果\n- 细粒度的导航控制\n- 带有自动激活的 CSS class 的链接\n- HTML5 历史模式或 hash 模式，在 IE9 中自动降级\n- 自定义的滚动条行为\n\n注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。\n\n\n**2.什么是SPA？**\n\n那么什么是单页面应用（SPA:Single Page Application）呢？\n\n所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。\n\n总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。\n\n",
                        "content": "<p><strong>1.什么是vue-router</strong><br />\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>\n<ul>\n<li>嵌套的路由/视图表</li>\n<li>模块化的、基于组件的路由配置</li>\n<li>路由参数、查询、通配符</li>\n<li>基于 Vue.js 过渡系统的视图过渡效果</li>\n<li>细粒度的导航控制</li>\n<li>带有自动激活的 CSS class 的链接</li>\n<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>\n<li>自定义的滚动条行为</li>\n</ul>\n<p>注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。</p>\n<p><strong>2.什么是SPA？</strong></p>\n<p>那么什么是单页面应用（SPA:Single Page Application）呢？</p>\n<p>所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。</p>\n<p>总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。</p>\n",
                        "replyNumber": 0,
                        "browseNumber": 0,
                        "tags": "",
                        "type": "教程",
                        "catalog": "h5",
                        "catalogName": "前端"
                    },
                    {
                        "version": 0,
                        "createTime": "2021-07-21 16:16:58",
                        "modifyTime": null,
                        "flag": true,
                        "aid": 515,
                        "uid": 10,
                        "username": "西蒙牛",
                        "title": "Vue-cli基础教程(十六)",
                        "summary": "vue-router基本概念",
                        "mdcontent": "**1.什么是vue-router**\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：\n\n- 嵌套的路由/视图表\n- 模块化的、基于组件的路由配置\n- 路由参数、查询、通配符\n- 基于 Vue.js 过渡系统的视图过渡效果\n- 细粒度的导航控制\n- 带有自动激活的 CSS class 的链接\n- HTML5 历史模式或 hash 模式，在 IE9 中自动降级\n- 自定义的滚动条行为\n\n注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。\n\n\n**2.什么是SPA？**\n\n那么什么是单页面应用（SPA:Single Page Application）呢？\n\n所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。\n\n总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。\n\n",
                        "content": "<p><strong>1.什么是vue-router</strong><br />\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>\n<ul>\n<li>嵌套的路由/视图表</li>\n<li>模块化的、基于组件的路由配置</li>\n<li>路由参数、查询、通配符</li>\n<li>基于 Vue.js 过渡系统的视图过渡效果</li>\n<li>细粒度的导航控制</li>\n<li>带有自动激活的 CSS class 的链接</li>\n<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>\n<li>自定义的滚动条行为</li>\n</ul>\n<p>注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。</p>\n<p><strong>2.什么是SPA？</strong></p>\n<p>那么什么是单页面应用（SPA:Single Page Application）呢？</p>\n<p>所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。</p>\n<p>总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。</p>\n",
                        "replyNumber": 0,
                        "browseNumber": 0,
                        "tags": "",
                        "type": "教程",
                        "catalog": "h5",
                        "catalogName": "前端"
                    },
                    {
                        "version": 0,
                        "createTime": "2021-07-21 16:16:58",
                        "modifyTime": null,
                        "flag": true,
                        "aid": 515,
                        "uid": 10,
                        "username": "西蒙牛",
                        "title": "Vue-cli基础教程(十六)",
                        "summary": "vue-router基本概念",
                        "mdcontent": "**1.什么是vue-router**\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：\n\n- 嵌套的路由/视图表\n- 模块化的、基于组件的路由配置\n- 路由参数、查询、通配符\n- 基于 Vue.js 过渡系统的视图过渡效果\n- 细粒度的导航控制\n- 带有自动激活的 CSS class 的链接\n- HTML5 历史模式或 hash 模式，在 IE9 中自动降级\n- 自定义的滚动条行为\n\n注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。\n\n\n**2.什么是SPA？**\n\n那么什么是单页面应用（SPA:Single Page Application）呢？\n\n所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。\n\n总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。\n\n",
                        "content": "<p><strong>1.什么是vue-router</strong><br />\nVue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>\n<ul>\n<li>嵌套的路由/视图表</li>\n<li>模块化的、基于组件的路由配置</li>\n<li>路由参数、查询、通配符</li>\n<li>基于 Vue.js 过渡系统的视图过渡效果</li>\n<li>细粒度的导航控制</li>\n<li>带有自动激活的 CSS class 的链接</li>\n<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>\n<li>自定义的滚动条行为</li>\n</ul>\n<p>注意：vue-router 是使用在单页面应用中，换句话说如果没有单页面应用也就没有vue-router。</p>\n<p><strong>2.什么是SPA？</strong></p>\n<p>那么什么是单页面应用（SPA:Single Page Application）呢？</p>\n<p>所谓单页面应用就是一个网站的所有功能都集中在一个页面中。从而保证了用户在不同功能之间跳转之间跳转的时候，仅仅通过js代码就可以完成切换，对于浏览器来说是无刷新的。也正是因为如此，用户在浏览器里直接访问某个功能的时候，浏览器会先打开首页，也就是进入一个vue的根页面。然后vue-router再根据url的后半部分，在根页面的基础上再继续渲染不同的功能。这些功能在页面上的具体位置是由代码里的routetr-view标签来决定的。但是只要用户进入这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳转，从而实现了浏览器的无刷新效果。</p>\n<p>总之，针对单页面应用的路由器vue-router来说，它要解决的核心问题有两个：第一，用户在不同功能之间跳转的时候不能让浏览器去刷新。第二，用户通过url可以在浏览器里顺利的直接使用某个功能。</p>\n",
                        "replyNumber": 0,
                        "browseNumber": 0,
                        "tags": "",
                        "type": "教程",
                        "catalog": "h5",
                        "catalogName": "前端"
                    }
                ],
                "total": 485,
                "size": 8,
                "current": 1,
                "orders": [],
                "optimizeCountSql": true,
                "searchCount": true,
                "countId": null,
                "maxLimit": null,
                "pages": 61
            }
        },
    }
</script>

<style scoped>
    .blog-left {
        width: 98%;
        height: 98%;
        margin: 10px 0px 10px 0px;
        padding: 10px 0px 10px 0px;
        background: #FFF;
    }

    .article-title {
        width: 98%;
        display: flex;
        justify-content: space-around;
        margin: 8px 0 8px 0;
    }

    .article-text {
        width: 70%;
        padding-right: 20px;
        text-indent: 2em;
        text-align: left;
        color: #444444;
    }

    article {
        width: 100%;
        border-bottom: 1px dotted #BBB;
    }

    .article-timer {
        width: 30%;
        text-align: right;
        color: #ccc;
        font-size: small;
    }

    .article-pager {
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }

    article h4 {
        margin-left: 20px;
    }

    article h4 a {
        color: #336699;;
        text-decoration: underline;
    }
</style>